<template>
  <div class="mod-config">
    <basic-container>
      <navigationHeTong
        :sign="{ a: false, b: false, c: false, d: true, e: false, f: false }"
      ></navigationHeTong>
      <div class="boxsty zhiBiao" v-if="zhiShow == 1">
        <div :height="searchheight" v-if="programInterface != 'fqtb'">
          <span
            style="float: right; margin-top: -30px; cursor: pointer"
            @click="searchchangeadvanced"
            >{{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
            <i
              :class="
                searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
              "
            />
          </span>
          <div v-show="searchadvanced">
            <el-form
              :inline="true"
              :model="dataForm"
              @keyup.enter.native="getDataList()"
              class="form-inline"
              label-width="120px"
            >
              <el-form-item label="合同名称">
                <el-input
                  v-model="dataForm.contractName"
                  placeholder="合同名称"
                  :clearable="true"
                  style="width: 150px"
                ></el-input>
              </el-form-item>
              <el-form-item label="受约人姓名">
                <el-input
                  v-model="dataForm.shouyueName"
                  placeholder="受约人姓名"
                  :clearable="true"
                  style="width: 150px"
                ></el-input>
              </el-form-item>
              <el-form-item label="受约人岗位">
                <el-input
                  v-model="dataForm.shouyueZhiwu"
                  placeholder="受约人岗位"
                  :clearable="true"
                  style="width: 150px"
                ></el-input>
              </el-form-item>
              <el-form-item label="受约人职级">
                <el-input
                  v-model="dataForm.ryZjmc"
                  placeholder="受约人职级"
                  :clearable="true"
                  style="width: 150px"
                ></el-input>
              </el-form-item>
              <el-form-item label="发约人姓名">
                <el-input
                  v-model="dataForm.fayueName"
                  placeholder="发约人姓名"
                  :clearable="true"
                  style="width: 150px"
                ></el-input>
              </el-form-item>
              <el-form-item label="合同状态">
                <el-select
                  style="width: 150px"
                  v-model="dataForm.contractAuditStatus"
                  placeholder="请选择"
                  :clearable="true"
                >
                  <el-option value="" label="全部"></el-option>
                  <el-option value="0" label="创建中"></el-option>
                  <el-option value="1" label="指标填报中"></el-option>
                  <el-option value="2" label="汇总中"></el-option>
                  <el-option value="3" label="汇总完成"></el-option>
                  <el-option value="4" label="文本审核中"></el-option>
                  <el-option value="5" label="文本审核退回"></el-option>
                  <el-option value="6" label="文本审核通过"></el-option>
                  <el-option value="7" label="受约人审核中"></el-option>
                  <el-option value="67" label="受约人驳回"></el-option>
                  <el-option
                    value="78"
                    label="绩效考核办公室审核中"
                  ></el-option>
                  <el-option value="8" label="发约人审核中"></el-option>
                  <el-option value="9" label="签订完成"></el-option>
                  <el-option value="10" label="履约中"></el-option>
                  <el-option value="11" label="结果填报中"></el-option>
                  <el-option value="111" label="填报审核驳回"></el-option>
                  <el-option value="12" label="结果填报审核中"></el-option>
                  <el-option value="13" label="结果汇总完成"></el-option>
                  <el-option value="14" label="领导审核中"></el-option>
                  <el-option value="15" label="领导审核完成"></el-option>
                  <el-option value="16" label="已结束"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button
                  icon="el-icon-search"
                  type="primary"
                  class="marginLeft"
                  @click="getDataList(1)"
                  >检索
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="avue-crud">
          <div class="border-top-theme">
            <div class="mt10">
              业绩合同
              <span>
                <el-radio v-model="radio" label="1">个人</el-radio>
                <el-radio v-model="radio" label="2">机构</el-radio>
              </span>
              <span style="margin-left: 160px" v-if="permissions.hetongrenwu_hetonghtxxdjb_scope">
                数据范围
                <el-radio-group v-model="radioTwo">
                  <el-radio
                    v-for="(item, index) in radioTwoList"
                    :label="item.value"
                    :key="index"
                    >{{ item.name }}</el-radio
                  >
                </el-radio-group>
              </span>
              <span style="float: right">
                <el-button
                  plain
                  type="primary"
                  size="small"
                  @click.native="fillInSub()"
                  v-loading.fullscreen.lock="fullscreenLoading"
                >
                  批量发起
                </el-button>
                <!-- <el-button plain type="primary" @click="exportExcelZblist" >导出</el-button> -->
              </span>
            </div>
          </div>
          <el-table
            ref="reftable"
            style="width: 100%; margin-top: 20px"
            :data="dataList"
            border
            v-if="rednermsg"
            v-loading="dataListLoading"
            @row-click="unfoldBtn"
          >
            <el-table-column
              type="selection"
              width="55"
              header-align="center"
              align="center"
              :selectable="selectable"
            ></el-table-column>
            <el-table-column
              type="index"
              width="80"
              header-align="center"
              align="center"
              label="序号"
            ></el-table-column>
            <el-table-column
              prop="contractName"
              header-align="center"
              show-overflow-tooltip
              align="center"
              min-width="200"
              label="合同名称"
            >
              <template slot-scope="scope">
                <span
                  @click="openZhibiao(scope.row)"
                  style="color: #0e258c; cursor: pointer"
                  >{{ scope.row.contractName }}</span
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="templateName"
              header-align="center"
              show-overflow-tooltip
              align="center"
              label="模板名称"
              min-width="150"
            ></el-table-column>
            <el-table-column
              v-if="radio == 2"
              prop="jigouName"
              header-align="center"
              show-overflow-tooltip
              align="center"
              label="机构名称"
            ></el-table-column>
            <el-table-column
              v-if="radio == 1"
              prop="shouyueCode"
              header-align="center"
              align="center"
              min-width="150"
              label="受约人编号"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.rowshows == false">
                  <span v-for="item in scope.row.shouyueCode.split(',')"
                    >{{ item }}<br
                  /></span>
                </div>
                <div
                  v-if="scope.row.rowshows == true"
                  v-for="(item, index) in cutout(scope.row.shouyueCode).slice(
                    0,
                    2
                  )"
                  :key="index"
                >
                  <el-badge
                    :value="cutout(scope.row.shouyueCode).length"
                    :max="9"
                    v-if="
                      cutout(scope.row.shouyueCode).length > 2 && index === 0
                    "
                    class="itembadge"
                  >
                    <span>{{ item }}</span>
                  </el-badge>
                  <span v-else>{{ item }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              v-if="radio == 1"
              prop="shouyueName"
              header-align="center"
              align="center"
              min-width="120"
              label="受约人姓名"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.rowshows == false">
                  <span v-for="item in scope.row.shouyueName.split(',')"
                    >{{ item }}<br
                  /></span>
                </div>
                <div
                  v-if="scope.row.rowshows == true"
                  v-for="(item, index) in cutout(scope.row.shouyueName).slice(
                    0,
                    2
                  )"
                  :key="index"
                >
                  <el-badge
                    :value="cutout(scope.row.fayueName).length"
                    :max="9"
                    v-if="cutout(scope.row.fayueName).length > 2 && index === 0"
                    style="margin-top: 10px; margin-right: 0px"
                  >
                    <span>{{ item }}</span>
                  </el-badge>
                  <span v-else>{{ item }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              v-if="radio == 1"
              prop="shouyueDeptName"
              header-align="center"
              align="center"
              min-width="150"
              label="受约人单位"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <div v-if="scope.row.rowshows == false">
                  <span v-for="item in scope.row.shouyueDeptName.split(',')"
                    >{{ item }}<br
                  /></span>
                </div>
                <div
                  v-if="scope.row.rowshows == true"
                  v-for="(item, index) in cutout(
                    scope.row.shouyueDeptName
                  ).slice(0, 2)"
                  :key="index"
                >
                  <el-badge
                    :value="cutout(scope.row.shouyueDeptName).length"
                    :max="9"
                    v-if="
                      cutout(scope.row.shouyueDeptName).length > 2 &&
                      index === 0
                    "
                    class="itembadge"
                  >
                    <span>{{ item }}</span>
                  </el-badge>
                  <span v-else>{{ item }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              v-if="radio == 1 && shows == 1"
              prop="shouyueZhiwu"
              header-align="center"
              align="center"
              min-width="180"
              label="受约人岗位"
            >
              <template slot="header">
                <el-tooltip placement="top" content="点击切换至受约人职级">
                  <span
                    ><i
                      @click="switchBtn(2)"
                      class="el-icon-refresh"
                      style="margin-right: 20px"
                    ></i
                    >受约人岗位</span
                  >
                </el-tooltip>
              </template>
              <template slot-scope="scope">
                <div v-if="scope.row.rowshows == false">
                  <span v-for="item in scope.row.shouyueZhiwu.split(',')"
                    >{{ item }}<br
                  /></span>
                </div>
                <div
                  v-if="scope.row.rowshows == true"
                  v-for="(item, k) in cutout(scope.row.shouyueZhiwu).slice(
                    0,
                    2
                  )"
                  :key="k"
                >
                  <span>{{ validatenull(item) ? "-" : item | ellipsis }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              v-if="radio == 1 && shows == 2"
              prop="ryZjmc"
              header-align="center"
              align="center"
              min-width="180"
              label="受约人职级"
            >
              <template slot="header">
                <el-tooltip placement="top" content="点击切换至受约人岗位">
                  <span
                    ><i
                      @click="switchBtn(1)"
                      class="el-icon-refresh"
                      style="margin-right: 20px"
                    ></i
                    >受约人职级</span
                  >
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="fayueName"
              header-align="center"
              align="center"
              min-width="120"
              label="发约人姓名"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.rowshows == false">
                  <span v-for="item in scope.row.fayueName.split(',')"
                    >{{ item }}<br
                  /></span>
                </div>
                <div
                  v-if="scope.row.rowshows == true"
                  v-for="(item, index) in cutout(scope.row.fayueName).slice(
                    0,
                    2
                  )"
                  :key="index"
                >
                  <el-badge
                    :value="cutout(scope.row.fayueName).length"
                    :max="9"
                    v-if="cutout(scope.row.fayueName).length > 2 && index === 0"
                    style="margin-top: 10px; margin-right: 0px"
                  >
                    <span>{{ item }}</span>
                  </el-badge>
                  <span v-else>{{ item }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="fayueZhiwu"
              header-align="center"
              align="center"
              min-width="180"
              label="发约人岗位"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.rowshows == false">
                  <span v-for="item in scope.row.fayueName.split(',')"
                    >{{ item }}<br
                  /></span>
                </div>
                <div
                  v-if="scope.row.rowshows == true"
                  v-for="(item, index) in cutout(scope.row.fayueZhiwu).slice(
                    0,
                    2
                  )"
                  :key="index"
                >
                  <span>{{
                      (validatenull(item) ? "-" : item) | ellipsis
                    }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="indiNumbers"
              header-align="center"
              align="center"
              min-width="150"
              label="指标数量"
            >
              <template slot-scope="scope">
                <el-popover placement="top" width="240" trigger="hover">
                  <p></p>
                  <div
                    v-for="(item, index) in cutout(
                      scope.row.quotaauditStatusstr
                    )"
                    :key="index"
                  >
                    <el-badge
                      v-if="scope.row.quotaauditStatus != '0'"
                      :value="item.split('-')[1]"
                      :max="9"
                      class="itembadge"
                    >
                      <span
                        v-if="item.indexOf('已完成') != -1"
                        style="color: #0bbf4a"
                        >{{ item.split("-")[0] }}</span
                      >
                      <span
                        v-else-if="item.indexOf('未完成') != -1"
                        style="color: red"
                        >{{ item.split("-")[0] }}</span
                      >
                      <span v-else>{{ item.split("-")[0] }}</span>
                    </el-badge>
                    <span v-else>{{ item.split("-")[0] }}</span>
                  </div>
                  <div slot="reference" class="name-wrapper">
                    <span>{{ scope.row.indiNumbers }}</span>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              prop="signLevel"
              header-align="center"
              align="center"
              label="合同级别"
              min-width="150"
              :formatter="statusFormater"
            >
            </el-table-column>
            <el-table-column
              prop="contractAuditStatus"
              header-align="center"
              min-width="150"
              align="center"
              label="合同状态"
              :formatter="contractAuditFormater"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            background
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 指标维护-->
      <HeTongZhiBiaoTable
        ref="zhibiaoFormRef"
        v-if="zhiShow == 2"
        :hetong="hetong"
        :hetongzhibiaoTable="hetongzhibiaoTable"
        :streamId="streamId"
        :programInterface="programInterface"
        v-on:fnBackOldPage="fnBackOldPage"
      ></HeTongZhiBiaoTable>
    </basic-container>
  </div>
</template>

<script>
import {
  fetchList,
  delObj,
  updateFilling,
  fillInSub,
} from "@/api/hetongrenwu/hetongtbfq";
import HeTongZhiBiaoTable from "@/views/hetongrenwu/components/hetongzhibiao-table.vue";
import { radioTwoList } from "@/api/hetongrenwu/hetonghtxxdjb";
import { exportExcelZbList } from "@/api/hetongrenwu/hetongjghz";
import { validatenull } from "@/util/validate";
import { mapGetters } from "vuex";

export default {
  components: {
    HeTongZhiBiaoTable,
  },
  data() {
    return {
      streamId: 0,
      hetongId: Number,
      id: Number,
      str: Number,
      status: Number,
      dataForm: {
        key: "",
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false,
      fullscreenLoading: false,
      radio: "1",
      radioTwo: "-1",
      zhiShow: "1",
      hetongzhibiaoTable: {},
      searchadvanced: true,
      searchheight: "0",
      radioTwoList: radioTwoList,
      hetong: {},
      programInterface: "",
      ryZjmc: "",
      shows: 1,
      rednermsg: true,
    };
  },
  watch: {
    radio(value) {
      if (value) {
        this.getDataList();
      }
    },
    radioTwo(value) {
      if (value) {
        this.getDataList();
      }
    },
  },
  created() {
    let params = this.$route.query;
    if (!validatenull(params)) {
      this.radioTwo = params.radioTwo;
    }
    this.getDataList();
  },
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 8) {
        return value.slice(0, 8) + "...";
      }
      return value;
    },
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  methods: {
    init(
      formInfo,
      formInfoDetailed,
      formData,
      GUID,
      wfYwMain,
      wfYwStream,
      dqYwStream,
      dqTask
    ) {
      this.programInterface = dqTask.programInterface;
      //console.log(dqTask.programInterface);
      this.streamId = dqYwStream.id;
      this.dataForm.id = wfYwMain.ywLyid;
      this.getDataList();
    },
    exportExcelZblist() {
      var data = this.$refs.table.selection;
      if (data.length == 0) {
        this.$message.closeAll();
        this.$message.error("请选择一个合同！");
        return;
      }

      var filename = " 指标明细表" + ".xlsx";
      var ids = [];
      for (var i = 0; i < data.length; i++) {
        ids.push(data[i].id);
      }
      exportExcelZbList({
        ids: ids,
      }).then((response) => {
        this.$message.closeAll();
        this.$message.success("导出成功!");
        let url = window.URL.createObjectURL(new Blob([response.data]));
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", filename);
        document.body.appendChild(link);
        link.click();
      });
    },
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if (this.searchadvanced) {
        this.searchheight = "auto";
      }
    },
    statusFormater(row, column) {
      const status = row.signLevel;
      if (status == 1) {
        return "一级合同";
      } else if (status == 2) {
        return "二级合同";
      } else if (status == 3) {
        return "三级合同";
      } else if (status == 4) {
        return "四级合同";
      } else if (status == 5) {
        return "五级合同";
      }
    },
    contFillFormater(row, column) {
      const status = row.contFillStatus;
      if (status == 0) {
        return "未填报";
      } else if (status == 1) {
        return "待预填报";
      } else if (status == 2) {
        return "已预填报";
      } else if (status == 3) {
        return "待填报";
      } else if (status == 4) {
        return "已填报";
      } else if (status == 5) {
        return "预填报审核中";
      } else if (status == 6) {
        return "填报审核中";
      } else if (status == 7) {
        return "预填报已退回";
      } else if (status == 8) {
        return "填报已退回";
      }
    },
    contractAuditFormater(row, column) {
      const status = row.contractAuditStatus;
      if (status == 10) {
        return "履约中";
      } else if (status == 11) {
        return "填报中";
      } else if (status == 12) {
        return "结果审核中";
      } else if (status == 13) {
        return "结果汇总完成";
      } else if (status == 14) {
        return "领导审核中";
      } else if (status == 15) {
        return "领导审核完成";
      } else if (status == 16) {
        return "已结束";
      } else if (status == 78) {
        return "绩效考核办公室审核中";
      }
    },
    // tbFormater(row, column) {
    //   const status = row.faqiType;
    //   if (status == 0) {
    //     return "预填报";
    //   } else if (status == 1) {
    //     return "实际填报";
    //   }
    // },
    unfoldBtn(row) {
      row.rowshows = !row.rowshows;
      this.rednermsg = false;
      this.$nextTick(() => {
        this.rednermsg = true;
      });
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      fetchList(
        Object.assign({
          fayueName: this.dataForm.fayueName,
          fayueZhiwu: this.dataForm.fayueZhiwu,
          shouyueZhiwu: this.dataForm.shouyueZhiwu,
          signLevel: this.dataForm.signLevel,
          shouyueName: this.dataForm.shouyueName,
          htYxqz: this.dataForm.htYxqz,
          htYxqq: this.dataForm.htYxqq,
          current: this.pageIndex,
          size: this.pageSize,
          pageType: "httbfq",
          type: this.radio,
          isbenbu: this.radioTwo,
          id: this.dataForm.id,
          ryZjmc: this.dataForm.ryZjmc,
          contractName: this.dataForm.contractName,
          contractAuditStatus: this.dataForm.contractAuditStatus,
        })
      )
        .then((response) => {
          this.dataList = response.data.data.records;
          this.totalPage = response.data.data.total;
          this.dataListLoading = false;
          this.dataList.forEach((ele) => {
            ele.rowshows = true;
          });
        })
        .catch(() => {
          this.dataListLoading = false;
        });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    // 删除
    deleteHandle(id) {
      this.$confirm("是否确认删除ID为" + id, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delObj(id);
        })
        .then((data) => {
          this.$message.closeAll();
          this.$message.success("删除成功");
          this.getDataList();
        });
    },
    //子集信息
    fnBackOldPage(data) {
      if (data == "返回原页面") {
        this.zhiShow = 1;
      }
    },
    openFilling(data, status) {
      var statusText = status == 1 ? "预填报" : "填报";
      this.$confirm(
        "是否确认【" + data.contractName + "】发起" + statusText,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        var params = {
          id: data.id,
          status: status,
        };
        updateFilling(params).then((data) => {
          //console.log("data=" + JSON.stringify(data));
          this.getDataList();
          if (status == 1) {
            this.$message.closeAll();
            this.$message.success("合同填报已更改为待预填报状态！");
          }
          if (status == 3) {
            this.$message.closeAll();
            this.$message.success("合同填报已更改为待填报状态！");
          }
        });
      });
    },

    //新增子集返回的数据(关闭修改页面，打开指标库维护)
    openZhibiao(data) {
      //console.log(data)
      this.hetong = data;
      this.addOrUpdateVisible = false;
      this.zhiShow = 2;
      this.streamId = data.streamId;
      this.hetongzhibiaoTable = {
        pageTitle: "业绩合同",
        page: "tbfq",
        showSearch: true,
        str: 1,
        hetongId: data.id,
        type: "tbfq",
        radioType: this.radio,
        lastPage: "tbfq",
        jgtbstatus: data.contractAuditStatus,
        rows: data,
      };
      this.$nextTick(() => {
        this.$refs.zhibiaoFormRef.getDataList();
      });
    },
    //拆分数据
    cutout(cellValue) {
      if (cellValue) {
        var c = cellValue.split(",");
        if (c.size < 1) {
          c.push("-");
          c.push("-");
        } else if (c.size < 2) {
          c.push("-");
        }
        return c;
      } 
    },
    //判空
    validatenull(val) {
      return validatenull(val);
    },
    /**
     * 判断表格数据是否能够被勾选删除
     */
    selectable(row, index) {
      if (row.contractAuditStatus == "10") {
        return true;
      } else {
        return false;
      }
    },
    //发起填报
    fillInSub() {
      var rows = this.$refs.reftable.selection;
      if (rows.length > 0) {
        var params = {
          rows: rows,
        };
        this.fullscreenLoading = true;
        fillInSub(params).then((data) => {
          this.$message.closeAll();
          this.$message.success("提交成功");
          this.getDataList();
          this.fullscreenLoading = false;
        });
      } else {
        this.$message.closeAll();
        this.$message({
          type: "info",
          message: "请选择合同发起填报!",
        });
      }
    },
    //切换显示受约人职务和受约人职级
    switchBtn(e) {
      this.shows = e;
      this.rednermsg = false;
      this.$nextTick(() => {
        this.rednermsg = true;
      });
    },
  },
};
</script>
